
import 'package:extra_hittest_area/extra_hittest_area.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:furaha_mkopo/commonTool/fm_color_tool.dart';
import 'package:furaha_mkopo/commonTool/fm_language_tool.dart';
import 'package:furaha_mkopo/commonTool/fm_screen_tool.dart';
import 'package:furaha_mkopo/commonUI/fm_custon_nav_bar_widget.dart';
import 'package:get/get.dart';

import '../../commonUI/fm_block_alert_widget.dart';
import '../../commonUI/fm_bottom_button.dart';
import 'fm_setting_controller.dart';

class FMMeSettingPage extends StatefulWidget {

  const FMMeSettingPage({super.key});

  @override
  State<FMMeSettingPage> createState() => _FMMeSettingPageState();
}

class _FMMeSettingPageState extends State<FMMeSettingPage> {

  final controller = Get.put(FMSettingController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: FMColorTool.color("#D1FFCA"),
      body: _bodyWidget(),
    );
  }

  Widget _bodyWidget() {
    return Stack(
      children: [
        _bgWidget(),
        _bgWidget(),
        _navWidget(),
        _cellBigWidget()
      ],
    );
  }

  Widget _navWidget() {
    return Positioned(
      top: FMScreenTool.topPadding(context),
      left: 0,
      right: 0,
      child: FMCustomNavBarWidget(
          title: FMLanguageTool.getText("settings")
      ),
    );
  }

  Widget _bgWidget() {
    return Positioned(
      top: 0,
      left: 0,
      right: 0,
      child: Container(
        height:286 ,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/me/setting_bg.png"),
            fit: BoxFit.fill,
          ),
        ),
      ),
    );
  }

  Widget _cellBigWidget() {
    return Positioned(
      top: FMScreenTool.appBarHeight(context) + 14,
      left: 16,
      right: 16,
      child: Container(
        height:192 ,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/me/setting_cell_big_bg.png"),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          children: [
            const SizedBox(height: 18),
            _cellWidget("setting_logout",FMLanguageTool.getText("Logout"),0),
            const SizedBox(height: 16),
            _cellWidget("setting_account_cancel",FMLanguageTool.getText("Account Cancellation"),1)
          ],
        ),
      ),
    );
  }

  Widget _cellWidget(String imageName,String title,int index) {
    return GestureDetector(
      onTap: (){
        clickAtIndex(index);
      },
      child: Container(
        height:70,
        margin: const EdgeInsets.only(left: 12,right: 12),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/me/setting_cell_bg.png"),
            fit: BoxFit.fill,
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.only(left: 14,right: 14),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Image.asset("assets/me/$imageName.png",width: 30,height: 30,),
                  const SizedBox(width: 10),
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: FMColorTool.color("#0E1D31")
                    ),
                  )
                ],
              ),
              Image.asset("assets/me/setting_arrow.png",width: 16,height: 16,),
            ],
          ),
        ),
      ),
    );
  }

  void clickAtIndex(int index) {
    if (index == 0) {
      showLogout();
    }else {
      showCancelAccount();
    }
  }

  void showLogout() {
    FMBlockAlertWidget.show(
        context: context,
        customWidget: Container(
          height: 461,
          width: FMScreenTool.width(context) - 64,
          padding: const EdgeInsets.only(left: 32,right: 32),
          decoration:  BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(FMLanguageTool.getAssets("assets/me/logout_bg"))
              )
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              FMBottomButton(
                height: 50,
                imageName: "assets/me/logout_button_bg.png",
                title: FMLanguageTool.getText("I'll take a look!"),
                onTap: (){
                  Navigator.pop(context);
                },
              ),
              const SizedBox(height: 10),
              GestureDetectorHitTestWithoutSizeLimit(
                onTap: (){
                  controller.logout(context);
                },
                extraHitTestArea: const EdgeInsets.all(8),
                child: Text(
                  FMLanguageTool.getText("Logout"),
                  style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: FMColorTool.blackColor
                  ),
                ),
              ),
              const SizedBox(height: 15),
            ],
          ),
        )
    );
  }

  void showCancelAccount() {
    FMBlockAlertWidget.show(
        context: context,
        customWidget: Container(
          height: 474,
          width: FMScreenTool.width(context) - 64,
          padding: const EdgeInsets.only(left: 32,right: 32),
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(FMLanguageTool.getAssets("assets/me/me_account_cancel_bg"))
              )
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              FMBottomButton(
                height: 50,
                imageName: "assets/me/logout_button_bg.png",
                title: FMLanguageTool.getText("Account Cancellation"),
                onTap: (){
                  controller.accountCancel(context);
                },
              ),
              const SizedBox(height: 10),
              _protocolWidget(),
              const SizedBox(height: 15),
            ],
          ),
        )
    );
  }

  Widget _protocolWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetectorHitTestWithoutSizeLimit(
          extraHitTestArea: const EdgeInsets.all(16),
          onTap: (){
            controller.updateProtocol();
          },
          child: GetBuilder<FMSettingController>(
              id: "updateProtocol",
              builder: (controller){
                return Image.asset(
                  'assets/me/${controller.isClickProtocol ? "account_calcel_selected" : "account_calcel_unselected"}.png',
                  width: 16,
                  height: 16,
                );
              }),
        ),
        const SizedBox(width: 10),
        Text(
          FMLanguageTool.getText("I have read and agree to the above."),
          style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.normal,
              color: FMColorTool.blackColor
          ),
        )
      ],
    );
  }


}
